<template>
  <div>
    <a-modal dialogClass="ry-modal" v-bind="attrs" v-on="listeners" width="90%">
      <div v-if="attrs.rybody" class="body-container body-container-content">
        <slot></slot>
      </div>
      <div v-else class="body-container">
        <slot>
        </slot>
      </div>
      <div v-if="attrs.ryfooter" class="footer-container">
        <a-button type="danger" @click="listeners.ok">保存</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      settings: {
        ryfooter: true,
        rybody: true,
        centered: true
      },
      methods: {
        ok: () => { }
      }
    }
  },
  computed: {
    attrs () {
      return Object.assign({}, { ...this.settings }, this.$attrs, { visible: this.visible, footer: null })
    },
    listeners () {
      return Object.assign({}, { ...this.methods }, this.$listeners)
    }
  },
  watch: {
    value: {
      handler (newVal, oldVal) {
        this.visible = newVal
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    close () {
      if (this.listeners.cancel) {
        this.listeners.cancel()
      }
      this.visible = false
      this.$emit('change', false)
    }
  }
}
</script>
<style lang="less" >
.ry-modal {
  width: 960px !important;
  .ant-modal-content {
    border-radius: 16px;
    height: 100%;
    .ant-modal-close-x {
      color: #fff;
    }
  }
  .ant-modal-header {
    position: relative;
    top: -1px;
    background: @primary-color;
    color: #fff;
    border-radius: 16px 16px 0 0;
    .ant-modal-title {
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }
  }
  .body-container {
    min-height: 400px;
    max-height: 860px;
    overflow-y: auto;
    overflow-x: hidden;
    .ant-form-item {
      margin-bottom: 48px;
    }
  }
  .body-container-content {
    padding: 20px 0px 20px 0px;
    line-height: 0.1rem;
    font-size: 16px;
    font-weight: 500;
  }
  .footer-container {
    width: 100%;
    text-align: center;
    button {
      padding: 0px 40px;
      margin: 30px 30px 30px;
    }
  }
  .ant-table {
    th,
    td {
      padding-top: 12px;
      padding-bottom: 12px;
    }
  }
  .mytree-container {
    width: 200px !important;
  }
}
</style>
